<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":"
            + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <title>添加用户</title>
    <base href="<%=basePath%>">
    <script src="static/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="static/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(function () {

        });
        function zero() {
            for (var i = 3; i < $("input").length;i++){
                $("input")[i].value = "";
            }

        }
        function checkForm() {
            var pass = true;
            if (!checkElement($("#name"), $("#name_error"), "请输入姓名")) {
                pass = false;
            }
            if (!checkElement($("#age"), $("#age_error"), "请输入年龄")) {
                pass = false;
            }
            if (!checkElement($("#address"), $("#address_error"), "请输入籍贯")) {
                pass = false;

            }
            if (!checkEmail($("#email"), $("#email_error"), "请输入邮箱")) {
                pass = false;
            }
            if (!checkElement($("#qq"), $("#qq_error"), "请输入qq")) {
                pass = false;
            }
            if (pass) {
                $("#submit").attr("onsubmit", "return true");
            } else {
                $("#submit").attr("onsubmit", "return false");
            }
        }

        function checkElement(target, element, msg) {
            if (target.val() == "") {
                element.text(msg);
                return false;
            } else {
                element.text("");
                return true;
            }
        }


        function checkEmail(target, element, msg) {
            if (target.val() == "") {
                element.text(msg);
            } else {
                var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                if (reg.test(target.val())) {
                    element.text("");
                    return true;
                } else {
                    element.text("邮箱格式不正确");
                }
            }
            return false;
        }
    </script>
    <style>
        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="row">
        <h2 style="text-align: center">修改用户信息</h2>
        <div class="col-md-6 col-md-offset-4">
            <form action="admin/updateUser.do" method="post" id="submit">
                <input type="hidden" name="id" value="${user.id}" readonly="readonly">
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-8">
                            <label for="name">姓名:</label><br>
                            <input type="text" readonly="readonly" class="form-control" id="name" name="name"
                                   value="${user.name}" placeholder="请输入姓名"
                                   onblur='checkElement($("#name"),$("#name_error"),"请输入姓名");'>
                        </div>
                        <div class="col-md-3" style="text-align: center;line-height: 80px;padding: 0;height: 50px">
                            <span style="color: red;font-size: 20px" id="name_error"></span>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <div class="row">
                        <div class="col-md-8">
                            <label for="male">性别:</label>&nbsp;&nbsp;&nbsp;
                            <c:if test="${user.gender == '男'}">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" value="男" checked readonly="readonly"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" readonly="readonly" value="女"> 女
                                </label>
                            </c:if>
                            <c:if test="${user.gender == '女'}">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" readonly="readonly" id="male" value="男" checked> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" readonly="readonly" value="女"> 女
                                </label>
                            </c:if>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <div class="row">
                        <div class="col-md-8">
                            <label for="age">年龄:</label><br>
                            <input type="number" class="form-control" id="age" name="age" value="${user.age}"
                                   placeholder="请输入年龄"
                                   onblur='checkElement($("#age"),$("#age_error"),"请输入年龄");'>
                        </div>
                        <div class="col-md-3" style="text-align: center;line-height: 80px;padding: 0;height: 50px">
                            <span style="color: red;font-size: 20px" id="age_error"></span>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <div class="row">
                        <div class="col-md-8">
                            <label for="address">籍贯:</label><br>
                            <input type="text" class="form-control" id="address" name="address" value="${user.address}"
                                   placeholder="请输入籍贯"
                                   onblur='checkElement($("#address"),$("#address_error"),"请输入籍贯");'>
                        </div>
                        <div class="col-md-3" style="text-align: center;line-height: 80px;padding: 0;height: 50px">
                            <span style="color: red;font-size: 20px" id="address_error"></span>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <div class="row">
                        <div class="col-md-8">
                            <label for="qq">QQ:</label><br>
                            <input type="text" class="form-control" id="qq" name="qq" value="${user.qq}"
                                   placeholder="请输入QQ"
                                   onblur='checkElement($("#qq"),$("#qq_error"),"请输入QQ");'/>
                        </div>
                        <div class="col-md-3" style="text-align: center;line-height: 80px;padding: 0;height: 50px">
                            <span style="color: red;font-size: 20px" id="qq_error"></span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-8">
                            <label for="email">邮箱:</label> <br>
                            <input type="email" class="form-control" id="email" name="email" value="${user.email}"
                                   placeholder="请输入邮箱"
                                   onblur='checkEmail($("#email"),$("#email_error"),"请输入邮箱");'>
                        </div>
                        <div class="col-md-3" style="text-align: center;line-height: 80px;padding: 0;height: 50px">
                            <span style="color: red;font-size: 20px" id="email_error"></span>
                        </div>
                    </div>
                </div>

                <div class="col-md-offset-2">
                    <button type="submit" class="btn btn-primary" onclick="checkForm();">提交</button>
                    <button type="button" class="btn btn-default" onclick="zero();">重置</button>
                    <button type="button" class="btn btn-default" onclick="window.history.back();">返回</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>